<template>
    <div class="list">
        <div class="title-box">
            <h3><slot></slot></h3>
            <span>{{isFinish ? num1 : num2}}</span>
        </div>
        <ul>
            <li v-for="(item, i) in list" :key="item.id" v-show="isFinish === item.check">
                <div class="content-box">
                    <input type="checkbox" v-model="item.check">
                    <div>
                        <span v-if="!item.isExit" @dblclick="changeExit(item)">{{item.task}}</span>
                        <input v-else type="text" @blur="finishExit(item)" class="exit" v-model="item.task">
                    </div>
                </div>
                <button @click="del(i)">-</button>
            </li>
        </ul>
    </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
export default {
    name: '',
    props: {
        isFinish: {
            type: Boolean
        }
    },
    setup() {
        let store = useStore()
        let list = computed(() => store.state.list)
        
        watch(() => list, (to) => {
            // console.log(to);
            store.commit('exitChange', to.value)
        }, {
            deep: true
        })


        return {
            list,
            num1: computed(() => store.getters.num1),
            num2: computed(() => store.getters.num2),
            del(i) {
                store.commit('del', i)
            },
            changeExit(item) {
                // console.log(item);
                item.isExit = true
            },

            finishExit(item) {
                item.isExit = false
            }
        }
    }
}
</script>

<style scoped lang="scss">
.list {
    width: 600px;
    margin: 20px auto;
    .title-box {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        span {
        font-size: 14px;
        display: block;
        width: 20px;
        height: 20px;
        background-color: #E6E6FA;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;}
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            width: 100%;
            display: flex;
            background-color: #fff;
            border-left: 5px solid #629A9C;
            height: 30px;
            align-items: center;
            padding-right: 10px;
            border-radius: 6px;
            margin-bottom: 20px;
            justify-content: space-between;
            .content-box {
                min-width: 250px;
                display: flex;
                align-items: center;
                input {
                    width: 24px;
                    height: 24px;
                    margin: 0 10px;
                }
                .exit {
                min-width: 200px;
                }
            }
            button {
                width: 28px;
                height: 24px;
                border-radius: 14px;
                border: 6px double #FFF;
                background: #CCC;
                line-height: 10px;
                text-align: center;
                color: #FFF;
                font-weight: bold;
                font-size: 14px;
                cursor: pointer;
            }
        }
    }
}
</style>